<template>
    <el-dialog
            title="修改广告"
            :close-on-click-modal="false"
            :visible.sync="showEditModal"
            @close="cancel"
            width="400px"
    >
        <div class="wrap" v-loading="loading" :element-loading-text="loadingText">
            <el-form
                    ref="editAdFormRef"
                    :model="editForm"
                    :rules="editFormRules"
                    label-width="100px"
            >
                <el-form-item label="广告状态:" prop="status">
                    <el-radio-group v-model="editForm.status">
                        <el-radio label="0">上架</el-radio>
                        <el-radio label="1">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="上架时间:" prop="publishTime">
                    <el-date-picker
                            v-model="editForm.publishTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="选择日期时间"/>
                </el-form-item>
                <el-form-item label="下架时间:" prop="recallTime">
                    <el-date-picker
                            v-model="editForm.recallTime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="选择日期时间"/>
                </el-form-item>
                <el-form-item label="权重" prop="level">
                    <el-input-number
                            size="small"
                            v-model="editForm.level"
                            controls-position="right"
                    >
                    </el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="footer_dialog">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button size="small" type="primary" :loading="loading" @click="onEdit">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { _editAd } from '_api'
    import moment from 'moment'

    export default {
        props: {
            rowData: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data () {
            return {
                showEditModal: false,
                loading: false,
                loadingText: '加载广告数据中...',
                editForm: {
                    adId: '',
                    status: 0,
                    publishTime: '',
                    recallTime: '',
                    level: '',
                    urlType: ''
                },
                editFormRules: {}
            }
        },

        watch: {
            showEditModal: {
                handler(val) {
                    if (val) this.getRowData()
                },
                immediate: true
            }
        },

        methods: {
            cancel () {
                this.showEditModal = false
                this.loading = false
            },
            // 表单数据赋值
            getRowData () {
                console.log('ad getData', this.rowData)
                this.editForm = Object.assign(this.editForm, {
                    adId: this.rowData.adId,
                    status: this.rowData.status,
                    publishTime: this.rowData.publishTime,
                    recallTime: this.rowData.recallTime,
                    level: this.rowData.level,
                    urlType: this.rowData.urlType
                })
            },
            // 保存修改
            onEdit () {
                this.$refs.editAdFormRef.validate((valid) => {
                    if (valid) {
                        if (moment(this.editForm.recallTime).isBefore(this.editForm.publishTime)) {
                            this.$message.error('下架时间不能在上架时间之前!')
                            return
                        }
                        this.loading = true
                        this.loadingText = '修改广告中...'
                        _editAd(this.editForm).then(res => {
                            this.$message.success(res.msg)
                            this.$emit('refresh')
                            this.cancel()
                        }).catch(() => {
                            this.loading = false
                        })
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .right {
        text-align: right;
    }
</style>
